<!--
  * @Author: ws
  * @Date: 2023-12-29 11:49:47
  * @email: 458658538@qq.com
  * @LastEditors: ws
  * @LastEditTime: 2024-01-12 11:02:50
  * @Description:
-->
<template>
  <!-- :model="innerValue" -->
  <el-form
    ref="formRef"
    :model="innerValue"
    v-bind="$attrs"
    :status-icon="formType !== 'view'"
    label-width="0px"
    label-position="right"
    size="large"
    v-on="$listeners"
  >
    <el-descriptions :key="key" border :column="18" class="common-descriptions-box-copy">
      <el-descriptions-item
        v-for="i in 3"
        :key="i"
        :span="6"
        labelClassName="!w-[174px] !p-0 !border-0"
        contentClassName="!p-0 !border-0"
      ></el-descriptions-item>
      <!--      :content-class-name="['!leading-none', getWidthClass(item.span)]" -->
      <el-descriptions-item
        v-for="(item, index) in sortCols"
        :key="item.label"
        :span="item.span || 18"
        labelClassName="w-[174px] !text-right !leading-none !bg-[#fafbfc] !text-[#515A6E]/70"
        :content-class-name="['!leading-none']"
      >
        <template slot="label">
          <div class="flex justify-end">
            <b v-if="item.required" class="isDot"></b>
            <span v-popper="{ content: item.label }" class="ellipsis">
              {{ item.label }}
            </span>
          </div>
        </template>
        <el-form-item class="!mb-0 !mr-0" :prop="item.prop" v-bind="item.itemProps">
          <slot v-if="item.component == 'slot'" :name="item.prop"></slot>
          <div v-else-if="item.component == 'auto-tip'" class="px-[16px]">
            <div v-popper="{ content: innerValue[item.prop] || '-' }" class="ellipsis">
              {{ innerValue[item.prop] == "0" || innerValue[item.prop] ? innerValue[item.prop] : "-" }}
            </div>
          </div>
          <template v-else>
            <!--            :placeholder="formType === 'view' ? '-' : item.props.placeholder" -->
            <component
              :is="item.component"
              v-model="innerValue[item.prop]"
              class="w-full"
              v-bind="item.props"
              v-on="item.listeners"
            >
              <template v-if="item.component === 'el-radio-group'">
                <el-radio
                  v-for="(radio, radioIndex) in item.options"
                  :key="radioIndex"
                  style="margin-top: 10px"
                  :label="radio.value"
                  :disabled="radio.disabled"
                >
                  {{ radio.label }}
                </el-radio>
              </template>
              <template v-if="item.component === 'el-checkbox-group'">
                <el-checkbox
                  v-for="(checkbox, checkboxIndex) in item.options"
                  :key="checkboxIndex"
                  :label="checkbox.value"
                >
                  {{ checkbox.label }}
                </el-checkbox>
              </template>
              <template v-if="item.component === 'el-select'">
                <el-option
                  v-for="(option, optionIndex) in item.options"
                  :key="optionIndex"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </template>
            </component>
          </template>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
</template>

<script>
import { groupBy, clone } from "xe-utils";
import vModelMixin from "@/mixin/v-model";

// <!-- 3*(1+2)=9
// <!-- 2*(1+2)=6
// 2*3*3=18
// {
//     prop: '', // 当前字段的 prop 值，同时会传到 el-form-item 的prop，不传数据验证和重置会失效
//     label: '', // 当前 el-form-item 的label
//     hidden: '', // 当前表单项是否展示
//     component: '', // 支持 slot、Component，渲染成什么
//     itemProps: '', // 注入到 el-form-item 的属性
//     props: '', // 当 component 为渲染组件时，注入到渲染组件当中的属性
//     listeners ： '', // 当 component 为渲染组件时，注入到渲染组件当中的事件
// }
export default {
  name: "ComponentForm",
  components: {},
  mixins: [vModelMixin],
  props: {
    columns: { type: Array, default: () => [] },
    spanByRow: { type: Boolean, default: false },
    formType: { type: String, default: "" },
  },
  data() {
    return {
      key: false,
    };
  },
  computed: {
    sortCols() {
      const sc = [];
      const cols = clone(this.columns, true).filter((f) => !f.hidden);
      cols.forEach((ele) => {
        if (this.formType === "view" || this.$attrs.disabled) {
          if (ele?.props?.placeholder) {
            ele.props.placeholder = "-";
          }
          if (ele.component == "el-input") {
            if (ele.props?.type == "textarea") {
              ele.props.autosize = {
                minRows: 1,
                maxRows: 6,
              };
            } else {
              ele.component = "auto-tip";
            }
          }
        } else {
          if (ele.component == "el-input") {
            if (ele.props?.type == "textarea") {
              ele.props.autosize = {
                minRows: 2,
                maxRows: 6,
              };
            }
          }
        }
      });
      if (!this.spanByRow) {
        return cols;
      }
      const group = groupBy(cols, "row");
      Object.keys(group).forEach((key) => {
        const elements = group[key];
        elements.forEach((ele, index) => {
          if (elements.length === 3) {
            ele.span = 6;
          } else if (elements.length === 2) {
            ele.span = index == 0 ? 6 : 12;
          } else {
            ele.span = 18;
          }
          sc.push(ele);
        });
      });
      return sc;
    },
  },
  watch: {
    sortCols(newVal) {
      this.key = !this.key;
    },
  },
  created() {},
  methods: {
    getWidthClass(span) {
      if (span == 6) {
        return "w-2/9";
      }
      if (span == 12) {
        return "w-5/9";
      }
      return "w-8/9";
    },
    getSpan(length, index) {
      console.log(length);
      if (length == 1) {
        return 18;
      } else if (length == 2) {
        return index == 0 ? 6 : 12;
      }
      return 6;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .common-descriptions-box-copy {
  .el-descriptions__table {
    table-layout: fixed;
  }

  .el-descriptions-item__content {
    padding: 0 !important;
  }

  .is-bordered .el-descriptions-item__cell {
    border-color: #e8eaef;
  }

  .el-descriptions-item__cell .el-form-item .el-input__inner,
  .el-descriptions-item__cell .el-form-item .el-textarea__inner,
  .el-descriptions-item__cell .el-form-item .ant-input,
  .el-descriptions-item__cell .el-form-item .el-radio-group {
    padding: 9px 16px;
    border-color: transparent !important;
    border-radius: 0 !important;
  }

  .el-descriptions-item__cell .el-input.is-disabled .el-input__inner {
    color: #515a6e !important;
    //background-color: transparent !important;
  }

  .el-descriptions-item__cell .el-textarea.is-disabled .el-textarea__inner {
    color: #515a6e !important;
    //background-color: transparent !important;
  }

  .el-input.is-disabled .el-input__suffix,
  .ant-input.ant-input-disabled + .ant-calendar-picker-icon,
  .el-date-editor.is-disabled .el-input__prefix {
    display: none;
  }

  .el-date-editor {
    position: relative;
    width: 100%;

    .el-input__prefix {
      // background: red;
      right: 30px;
      left: unset;
    }
  }

  .el-input.is-disabled .el-input__inner::placeholder,
  .el-textarea.is-disabled .el-textarea__inner::placeholder,
  .ant-input.ant-input-disabled::placeholder {
    color: #515a6e !important;
    //color: transparent !important;
  }
}

.el-form[disabled="disabled"] .common-descriptions-box-copy .el-descriptions-item__label .isDot {
  display: none;
}
</style>
